<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/jQuery-2.1.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.json-2.4.min.js"></script>
</head>
<style>
</style>

<div style="width:100%;height:425px;margin:0 auto;margin-top:16px;background:url(image/bg.jpg) no-repeat scroll -90px -35px;;">
     <div class="left" style="height:400px">
	    <ul id="sbxz" > 
		    <li style="background:url(image/sblb.jpg);padding: 0px;width: 200px;height:64px;" >
			    <a href="#"><img style="float:left;" src="image/menu.jpg"/></a>
				<a href="#"><span class="t1" style="line-height:64px;width:auto;">设备列表</span></a>
				<a href="#"><img style="float:right;" src="image/refresh.jpg"/></a>
			</li >
		   
				
		</ul>
	 </div>
	 <div class="col-md-8">
	    <div class="mainmenu" style="display:none;">
		    <span style="margin-left:12px;">九比特智慧园林系统</span>
			<span class="rqtq">南京</span>
			<span class="rqtq">2016.12.06</span>
			<span class="rqtq">12:06</span>
			<span class="rqtq">中雨</span>
		</div>
		<div class="gzqd">
            <div style="margin-top:56px;font-size:28px;color:#666;">光照强度</div>		
			<div
				id="diagram-id-1"
				class="diagram1"
				data-circle-diagram='{
					"percent": "28",
					"size": "150",
					"borderWidth": "4",
					"bgFill": "#cacaca",
					"frFill": "#40f701",
					"textSize": "72",
					"textWeight": "600",
					"textColor": "#42fe00"
					}'>
				<div class="title" style="width:68px;height:18px;background:#187bc1;color:#fff;border-radius:9px;font-size:15px;line-height:18px;margin-left:4px;">优</div>
			</div>
			<div style="margin-left:91px;">
			    <div class="index1" style="margin-top:14px;">
				    <div class="index1li">0</div>
					<div class="index1li">35</div>
					<div class="index1li">75</div>
					<div class="index1li">115</div>
					<div class="index1li">150</div>
					<div class="index1li">250</div>
					<div class="index1li" style="width:65px;"> >500μg/㎡</div>
				</div>
				<div class="index2">
				    <div class="index21"></div>
					<div class="index22"></div>
					<div class="index23"></div>
					<div class="index24"></div>
					<div class="index25"></div>
					<div class="index26"></div>
				</div>
				<div class="index3">
				    <div class="index31">优</div>
					<div class="index31">良</div>
					<div class="index31">轻度</div>
					<div class="index31">中度</div>
					<div class="index31">重度</div>
					<div class="index31">严重</div>
				</div>

			</div>
		</div>
		<div class="wsd" style="height: 400px;">
		    <span class="wsd" style="margin-top:86px;">空气</span>
			<span class="wsd">温湿度</span>
			<span class="wsd" style="margin-top:86px;">土壤</span>
			<span class="wsd">温湿度</span>
		</div>
		<div>
			<div
				id="diagram-id-2"
				class="diagram"
				data-circle-diagram='{
					"percent": "29.2",
					"size": "107",
					"borderWidth": "4",
					"bgFill": "#cacaca",
					"frFill": "#6dc2a6",
					"textSize": "42",
					"textColor": "#6dc2a6"
					}'>
				<div class="title" style="color:#6dc2a6;">温暖</div>
				<div class="title1" style="color:#6dc2a6;">温 度℃</div>				
			</div>
			<div
				id="diagram-id-3"
				class="diagram"
				data-circle-diagram='{
					"percent": "46.0",
					"size": "107",
					"borderWidth": "4",
					"bgFill": "#cacaca",
					"frFill": "#a6024a",
					"textSize": "42",
					"textColor": "#a6024a",
					"margin-top": "0px"
					}'>
				<div class="title" style="color:#a6024a;">温暖</div>
				<div class="title1" style="color:#a6024a;">湿 度%</div>
			</div>
			<div
				id="diagram-id-4"
				class="diagram"
				data-circle-diagram='{
					"percent": "24.2",
					"size": "107",
					"borderWidth": "4",
					"bgFill": "#cacaca",
					"frFill": "#a3b401",
					"textSize": "42",
					"textColor": "#a3b401",
					"margin-top": "0px"
					}'>
				<div class="title" style="color:#a3b401;">温暖</div>
				<div class="title1" style="color:#a3b401;">温 度℃</div>
			</div>
			<div
				id="diagram-id-5"
				class="diagram"
				data-circle-diagram='{
					"percent": "46.0",
					"size": "107",
					"borderWidth": "4",
					"bgFill": "#cacaca",
					"frFill": "#797e00",
					"textSize": "42",
					"textColor": "#797e00"
					}'>
				<div class="title" style="color:#797e00;">温暖</div>
				<div class="title1" style="color:#797e00;">湿 度%</div>
			</div>
		</div>
	 </div>


	<script src="js/jquery.circle-diagram.js"></script>
	<script src="js/realtimeData.js"></script>
<script>
    $(function(){
        $.fn.main.initial();
    });
</script>
</body>
</html>
